<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="four-bar-linkage.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>四连杆机构模拟器</h1>
        </header>
        
        <div class="controls">
            <div class="input-group">
                <label for="link1">机架长度 (L₀):</label>
                <input type="number" id="link0" min="10" max="500" value="100">
            </div>
            <div class="input-group">
                <label for="link1">输入杆 (L₁):</label>
                <input type="number" id="link1" min="10" max="500" value="50">
            </div>
            <div class="input-group">
                <label for="link2">连杆长度 (L₂):</label>
                <input type="number" id="link2" min="10" max="500" value="80">
            </div>
            <div class="input-group">
                <label for="link3">从动杆 (L₃):</label>
                <input type="number" id="link3" min="10" max="500" value="70">
            </div>
            <div class="input-group">
                <label for="speed">运动速度:</label>
                <input type="range" id="speed" min="1" max="10" value="5">
            </div>
            <div class="zoom-controls">
                <label for="zoom">缩放:</label>
                <button id="zoom-out-btn">-</button>
                <span id="zoom-level">100%</span>
                <button id="zoom-in-btn">+</button>
                <button id="auto-scale-btn">自适应</button>
            </div>
            <div class="button-group">
                <button id="start-btn">启动</button>
                <button id="stop-btn">停止</button>
                <button id="reset-btn">重置</button>
                <button id="clear-path-btn">清除轨迹</button>
            </div>
        </div>
        
        <div class="simulation-area">
            <div class="info-panel">
                <h3>当前参数</h3>
                <div id="status-message"></div>
                <div id="current-angle">输入杆角度: 0°</div>
                <div id="mechanism-type">机构类型: 检测中...</div>
            </div>
            <canvas id="linkage-canvas" width="600" height="400"></canvas>
        </div>
    </div>
    
    <script src="four-bar-linkage.js"></script>
</body>
</html>
